<template>
	<div v-if="visible">
		<div class="mask"> 
		</div>
		<div class="modal">
			<div class="title">{{title}}</div>
			<div class="content">{{message}}</div>
			<div class="buttons"> 
				<a @click="cancel"> 取 消 </a>
				<a @click="confirm"> 确 定 </a>
			</div>
		</div>
	</div>
</template>

<script>
	export default{ 
		name:'Confirm',
		data(){ 
			return{ 
				title:'没有标题',
				message:'没有信息',
				visible:false,
				fn:null,
				softKeyBoard:false,
			}
		},
		props:[] ,
		
		methods:{
			show(title, msg, fn){
				this.softKeyBoard = this.$route.path == '/check/input/certificate-info';
				if(this.softKeyBoard ){
					this.send({name:'OpenKeyboard', remark:'打开软键盘',x:188,y:515});
				}
				this.title = title;
				this.message = msg;
				this.visible = true;
				this.fn = fn;
			},
			
			confirm(){
				if(this.fn != null){
					this.fn();
				} 
			},
			
			cancel(){
				this.visible=false;
				if(this.softKeyBoard ){
					this.send({name:'CloseKeyboard', remark:'关闭软键盘', route:'/check/input/certificate-info'});
				}
			}
		}
	}
	
</script>

<style scoped="scoped">
	.modal{
		width: 50rem; line-height: 5rem; height: 28rem; position: fixed; left: 50%;top:50%; margin-left: -25rem;margin-top: -14rem;
		z-index: 110; border: solid 1px #999; border-radius: 1rem; background-color: #e7eef4;
		color: #1268f9;
	}
	
	.modal .title{
		height:5rem; font-size: 2rem; text-align: center; 
	}
	.modal .content{
		height:17rem; line-height: 17rem; font-size: 1.75rem; text-align: center; background-color: #fff; border-bottom: solid 1px #AEB8C1;
	}
	.modal .buttons{
		height:6rem; line-height: 6rem; font-size: 2rem; text-align: center; 
	}
	.modal a {
		padding: 0px 40px; border: solid 1px #ccc; background-color: #1268f9; color: #fff; border-radius: 2rem; margin:0 1.5rem; 
		font-size: 26px; font-weight: normal; height:60px; line-height:60px;
	}
</style>
